<style>
  md-grid-tile {
    background-color: lightblue;
  }

  md-grid-list {
    min-height: 400px;
  }
</style>

<div>

  <h2>grid-list demo</h2>

  <md-grid-list cols="4" row-height="50px" gutter-size="2em" id="complex">

    <md-grid-tile rowspan="1" colspan="2"> Tile #1 </md-grid-tile>
    <md-grid-tile rowspan="1" colspan="1"> Tile #2 </md-grid-tile>
    <md-grid-tile rowspan="3" colspan="1"> Tile #3 </md-grid-tile>
    <md-grid-tile rowspan="2" colspan="2"> Tile #4 </md-grid-tile>
    <md-grid-tile rowspan="1" colspan="3"> Tile #5 </md-grid-tile>

  </md-grid-list>

  <hr>



  <md-grid-list cols="4" row-height="50px" gutter-size="2em" id="simple">

    <md-grid-tile rowspan="1" colspan="1"> Tile #1 </md-grid-tile>
    <md-grid-tile rowspan="1" colspan="1"> Tile #2 </md-grid-tile>
    <md-grid-tile rowspan="1" colspan="1"> Tile #3 </md-grid-tile>
    <md-grid-tile rowspan="1" colspan="1"> Tile #4 </md-grid-tile>
    <md-grid-tile rowspan="1" colspan="1"> Tile #5 </md-grid-tile>
    <md-grid-tile rowspan="1" colspan="1"> Tile #6 </md-grid-tile>
    <md-grid-tile rowspan="1" colspan="1"> Tile #7 </md-grid-tile>

  </md-grid-list>

</div>
